<!DOCTYPE html>
<html>
<head>
	<title>css-table</title>
	<meta charset="utf-8">
	<style type="text/css">
		/*caption{
			caption-side: top;
		}
		table, th, td{
			border: 2px solid yellow;
		}
		table{
			width: 100%;
		    border-collapse: collapse;
		}
		th{
			height: 15px;
			background-color: green;
			color:white;
		}
		td{
			height: 15px;			
			text-align: center;
			vertical-align: bottom;
		}*/

		#customer{
			font-family: font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
			width: 100%;
			border-collapse: collapse;
		}

		#customer td, #customer th{
			font-size: 1em;
			border:1px solid black;
			color:white;
			background-color: green;
		}

		#customer th {
			font-size:1.1em;
			text-align:left;
			padding-top:5px;
			padding-bottom:4px;
			background-color:#A7C942;
			color:#ffffff;
		}

		#customer tr.alt td{
			color: black;
			background-color:white;
		}

		#customer caption{
			background-color: white;
			font-size: 40px;
		}

	</style>
</head>
<body>
	<table>
		<caption>Table 1.1 Customers</caption>

		<th>Firstname</th>
		<th>Second name</th>
		<tr>
			<td>first row, first col</td>
			<td>second row, first col</td>
		</tr>
		<tr>
			<td>first row, first col</td>
			<td>second row, first col</td>
		</tr>
		<tr>
			<td>first row, first col</td>
			<td>second row, first col</td>
		</tr>
	</table>

	<hr>

	<table id="customer">
		<caption> table2</caption>
		<th>company</th>
		<th>contact</th>
		<th>country</th>
		<tr>
			<td>Alfreds Futterkiste	</td>
			<td>Maria Anders		</td>
			<td>Germany	</td>
		</tr>
		<tr class="alt">
			<td>Alfreds Futterkiste	</td>
			<td>Maria Anders		</td>
			<td>Germany	</td>
		</tr>
		<tr>
			<td>Alfreds Futterkiste	</td>
			<td>Maria Anders		</td>
			<td>Germany	</td>
		</tr>
		<tr class="alt">
			<td>Alfreds Futterkiste	</td>
			<td>Maria Anders		</td>
			<td>Germany	</td>
		</tr>
	</table>

	
</body>
</html>